import useBrandInfo from '@/common/hook/useBrandInfo'
import { useUserStore } from '@/common/hox/userStore'
import { resizeImgUrl } from '@/common/utils'
import { useCouponStore } from '@/common/hox/couponStore'
import { Image } from '@tarojs/components'
import { useRequest } from 'ahooks'
import dayjs from 'dayjs'
import { useMemo } from 'react'
import styles from './index.module.less'

type MovieTitlePropsType = {
  data: Omit<Movie.MovieItem, "intro">
  useCombination: boolean
}
function MovieTitle(props: MovieTitlePropsType) {
  const { data, useCombination } = props
  const { id, picUrl, name, grade, director, cast, duration, filmTypes, language, publishTime, wishNum } = data

  const { brandInfo: movieBrandInfo } = useBrandInfo()
  const movieBrandId = useMemo(() => movieBrandInfo && movieBrandInfo.id, [movieBrandInfo])
  const { userInfo } = useUserStore()
  const { movieCouponList, refreshCoupon } = useCouponStore()
  useRequest(async() => refreshCoupon(), {
    ready: Boolean(movieBrandId && userInfo?.userId),
  })

  const couponStr = useMemo(() => { 
    if (useCombination) return []
    if (!movieCouponList) return []
    const list = movieCouponList.filter(item => { 
      if (!item.productIds.length) return true
      return item.productIds.find(i => i === id)
    })
    return [... new Set(list.map(item => `${item.useThreshold ? '满' + item.useThreshold : ''}减${item.batchValue}`))].slice(0, 2)
  }, [movieCouponList, useCombination])
  const formatNumber = (num: number): number | string => {
    if (num < 10000) {
      return num
    }
    return (num / 10000).toFixed(1) + "万"
  }
  return (
    <div className={styles.movieTitle}>
      <Image className={styles.pic} src={resizeImgUrl(picUrl)} mode='aspectFill' />
      <div className={styles.detail}>
        <div className={styles.title}>{name}</div>
        <div className={styles.dec}>
          {[
            grade ? `${grade}评分` : '暂无评分',
            wishNum ? formatNumber(wishNum) + '人想看' : null,
            language,
          ].filter(item => !!item).join(' | ')}
        </div>
        <div className={styles.dec}>
          {[
            duration ? `${parseInt(duration)}分钟` : null,
            filmTypes ? filmTypes : null,
            language,
          ].filter(item => !!item).join(' | ')}
        </div>
        <div className={styles.dec}>导演：{ director }</div>
        <div className={styles.dec}>主演：{ cast }</div>
        <div className={styles.dec}>{dayjs(publishTime).format('YYYY-MM-DD')}上映</div>
        {couponStr.filter(Boolean).map((item) => {
          return <div key={item} className={styles.coupon}>券 | {item}</div>
        })}
      </div>
    </div>
  )
}

export default MovieTitle